<template>
  <div class="console-Coupon">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="可用优惠券" name="1" />
        <el-tab-pane label="失效/已使用" name="2" />
      </el-tabs>
      <el-table :header-cell-style="{'background-color': '#eef1ff','color': '#2c2c2c','border-radius': '10px'}" :data="pageInfo" height="700" style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="couponType" label="类型" #default="scope">
          {{scope.row.couponType == 1 ? '代金券' : '时长券'}}
        </el-table-column>
         <!-- <el-table-column prop="address" label="规则" /> -->
        <el-table-column prop="couponAmount" label="面额" />
        <!-- <el-table-column prop="date" label="折扣" /> -->
        <el-table-column prop="validityStart" label="生效时间/失效时间" #default="scope">
          {{scope.row.validityStart == 0 ? '永久有效' : (fmtSe(scope.row))}}
        </el-table-column>
        <el-table-column label="状态" #default="scope">
          <div v-if="scope.row.status == 1">有效</div>
          <div v-else>失效</div>
        </el-table-column>
        <!-- <el-table-column prop="date" label="适用产品" /> -->
        <el-table-column prop="actType" label="适用范围" #default="scope">
          {{ scope.row.actType == 1 ? '注册时用户' : '全场用户' }}
        </el-table-column>
      </el-table>
      <!-- <div class="pagenation">
        <el-pagination :current-page="pageInfo.current" :page-sizes="[10, 20, 30, 50]" :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div> -->
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import dayjs from 'dayjs'

export default {
  name: 'Coupon',
  data () {
    return {
      tableData: [],
      activeName: '1',
      pageInfo: []
    }
  },
  mounted () {
    this.getDataList()
  },
  computed: {
  },
  methods: {
    fmtSe(e) {
      return dayjs(e.validityStart).format('YYYY-MM-DD') + '/' + dayjs(e.validityEnd).format('YYYY-MM-DD')
    },
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.pageInfo.current = val
      this.getDataList()
    },
    getDataList() {
      let status = 0
      if (this.activeName == 1) {
        status = 2
      } else {
        status = 1
      }
      request.get('/xsy-service-web/WebCoupon/my/'+status).then(res => {
        this.pageInfo = res.data
        // res.data.map(item => {
        //   if (item.got) {
        //     this.pageInfo.push(item)
        //   }
        // })
      })
    },
    handleClick (tab, event) {
      console.log(tab, event);
      this.getDataList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
